<template>
  <el-dropdown trigger="click" @command="handleLanguageChange">
    <span class="el-dropdown-link">
      {{ currentLanguage }}<i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="en">English</el-dropdown-item>
      <el-dropdown-item command="zh">中文</el-dropdown-item>
      <el-dropdown-item command="ja">日本語</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: 'LanguageSwitcher',
  computed: {
    currentLanguage() {
      const langMap = {
        en: 'English',
        zh: '中文',
        ja: '日本語'
      }
      return langMap[this.$i18n.locale] || langMap.en
    }
  },
  methods: {
    handleLanguageChange(lang) {
      console.log('Changing language to:', lang)
      
      try {
        // 使用全局方法切换语言
        const success = this.$setLanguage(lang)
        console.log('Language change success:', success)
        
        if (success) {
          // 强制更新组件
          this.$nextTick(() => {
            this.$forceUpdate()
            this.$root.$forceUpdate()
            console.log('Components force updated')
          })
        }
      } catch (error) {
        console.error('Error during language change:', error)
      }
    }
  }
}
</script>

<style scoped>
.el-dropdown {
  height: 100%;
  display: flex;
  align-items: center;
}
</style>
